<template>
  <div>
    <h1>vue3未来写法</h1>
    <div>
      <ul>
        <li>{{ count }}</li>
        <li @click="add">add</li>
      </ul>
    </div>
    <div class="countTime">
      <h2>{{ countTime }}</h2>
      <button @click="start">开始</button>
      <button @click="pause">停止</button>
    </div>
    <hr />
    <div class="box">
      <XtxMessage type="error" text="出错了" />
      <!-- <Msg type="success" text="成功"/> -->
    </div>
  </div>
</template>

<script setup>
// 创建虚拟dom
import { ref, createVNode, render, onMounted } from 'vue'
// 必须的    导入即注册
// import Msg from '@/components/message/index'
import Message from '@/components/message/index.js'
// 导入倒计时方法
import { useCountDown } from '@/hook'

onMounted(() => {
  // 创建一个html元素
  const h1 = createVNode('h1', { class: 'red', a: 1 }, ['我是h1'])
  console.log(h1)
  // 渲染虚拟dom
  render(h1, document.querySelector('.box'))
  // 创建一个组件元素(.vue)=>传组件对象必须要先导入组件
  // const msg = createVNode(Msg, { type: 'success', text: '虚拟dom' })
  // render(msg, document.querySelector('.box'))
  // 调用message方法,打开消息提示
  Message({ type: 'success', text: 'text fn!' })
  // render()
})
const { countTime, start, pause } = useCountDown(60)
const count = ref(0)
function add () {
  count.value++
}
</script>

<style lang="less" scoped>
/deep/ .red {
  color: red;
}

</style>
